<template>
  <div class="cont">
    <div id="scroller" class="LockInformation-con">
      <div class="LockInformation-con-title">
        <div class="item centerbox">设备名称</div>
        <div class="item centerbox">检测类型</div>
        <div class="item centerbox">检测结论</div>
        <div class="item centerbox">检测时间</div>
      </div>
      <div class="marquee_box">
        <!-- <marquee
          @mouseenter="marqueeEnter"
          @mouseleave="marqueeLeave"
          scrollamount="2"
          direction="up"
          style="width:100%;height:100%;"
        >-->
        <ul class="marquee_list" :class="{marquee_top:animate}">
          <li
            :class="index%2==0?'lione':'litwo'"
            v-for="(item, index) in newMainLoadList"
            :key="index"
            @click="goPage(item)"
          >
            <span>{{ item.jcxz }}</span>
            <span>{{ item.jcmc }}</span>
            <span :class="{zc:item.status,yc:!item.status}">{{ item.jl }}</span>
            <span>{{ item.jcrq }}</span>
          </li>
        </ul>
        <!-- </marquee> -->
      </div>
    </div>
    <el-dialog :visible.sync="visible" width="100%" top="5vh" :title="iframeTitle">
      <div class="iframe-container">
        <iframe
          id="iframe"
          v-if="visible"
          :src="iframeUrl"
          style="width:100%; height:100%;border:0px;border-radius:5px;"
          border="0"
          scrolling="no"
        ></iframe>
        <iframe class="iframe" frameborder="0"></iframe>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { GetSocketModule } from "@/store/modules/GetSocketData";

@Component
export default class extends Vue {
  // 跳转到弹窗页面
  private goPage(ddjcData: any) {
    let query = this.$route.query || {};
    let SBMC: any = query.SBMC || "";
    SBMC = SBMC.replace(/#/g, "@");
    let jclxName = ddjcData.jcxz || "";
    let jclx = query.JCLX || "";
    let sbid = query.PMSID || "";
    let sblx = query.SBLX || "";
    let bdzmc = query.BDZMC || "";
    let sbmc = SBMC;
    let ssds = ddjcData.ssds;
    let datid = ddjcData.datid;
    this.iframeTitle = `${ddjcData.jcmc}`;
    this.iframeUrl = `http://10.193.23.21:28883/epribigdata/jsp/tg_zt/ddjc/detail_hwrxjc.jsp?jclx=${jclx}&sbid=${sbid}&sblx=${sblx}&jclx=${jclxName}&ssdsmc=${ssds}&bdzmc=${bdzmc}&sbmc=${sbmc}&datid=${datid}&cdid=&zdjl=&shjl=&beginDate=&endDate=`;
    this.visible = true;
  }
  private scrollTimer; // 滚动定时器
  private mainLoadList = [
    //   {
    //     imgsrc: "",
    //     jcxz: "#1主变",
    //     jcrq: "2020-10-29 08:45:22",
    //     jcmc: "红外线测量",
    //     jl: "正常",
    //     status: true,
    //   },
    //   {
    //     imgsrc: "",
    //     jcxz: "#2主变",
    //     jcrq: "2020-10-29 08:45:22",
    //     jcmc: "红外线测量",
    //     jl: "异常",
    //     status: false,
    //   },
    //   {
    //     imgsrc: "",
    //     jcxz: "#3主变",
    //     jcrq: "2020-10-29 08:45:22",
    //     jcmc: "红外线测量",
    //     jl: "正常",
    //     status: true,
    //   },
    //   {
    //     imgsrc: "",
    //     jcxz: "#4主变",
    //     jcrq: "2020-10-29 08:45:22",
    //     jcmc: "红外线测量",
    //     jl: "异常",
    //     status: false,
    //   },
    //   {
    //     imgsrc: "",
    //     jcxz: "#5主变",
    //     jcrq: "2020-10-29 08:45:22",
    //     jcmc: "红外线测量",
    //     jl: "正常",
    //     status: true,
    //   },
    //   {
    //     imgsrc: "",
    //     jcxz: "#6主变",
    //     jcrq: "2020-10-29 08:45:22",
    //     jcmc: "红外线测量",
    //     jl: "异常",
    //     status: false,
    //   },
  ];
  private animate: boolean = false;
  private visible: boolean = false;
  iframeTitle = "";
  iframeUrl = "";
  // 监听主编负载滚动列表
  get newMainLoadList() {
    let mainLoadList = this.mainLoadList;
    mainLoadList = [
      ...mainLoadList,
      ...mainLoadList,
      ...mainLoadList,
      ...mainLoadList,
      ...mainLoadList,
      ...mainLoadList,
      ...mainLoadList,
      ...mainLoadList,
      ...mainLoadList,
      ...mainLoadList,
      ...mainLoadList,
      ...mainLoadList,
      ...mainLoadList,
      ...mainLoadList,
      ...mainLoadList,
    ];
    return mainLoadList;
  }

  marqueeEnter(event) {
    event.target.stop();
  }
  marqueeLeave(event) {
    event.target.start();
  }
  fetchList() {
    // let params = { };
    let params = { pmsbid: this.PMSID };
    (this as any).$services
      .getChargedList({ data: params })
      .then((result: any) => {
        result = result || {};
        let data = result.data || [];
        this.mainLoadList = data;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  stationId = "";
  stationName = "";
  SBID = "";
  SBMC = "";
  PMSID = "";
  setCurrentData() {
    let query = this.$route.query || {};
    let stationId: any = query.BDZID;
    let stationName: any = query.BDZMC;
    let SBID: any = query.SBID;
    let PMSID: any = query.PMSID;
    let SBMC: any = query.SBMC;
    this.stationId = stationId;
    this.stationName = stationName;
    this.SBID = SBID;
    this.PMSID = PMSID;
    this.SBMC = SBMC;
  }
  mounted() {
    this.setCurrentData();
    this.fetchList();
  }
}
</script>

<style lang="scss" scoped>
.cont {
  width: 100%;
  height: calc(100% - 0.27rem);
  // background-color: burlywood;
  .LockInformation-con {
    width: 100%;
    height: 100%;
    padding: 0.06rem 0.1rem;
    // background-color: gray;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    // background-color: cadetblue;
    &-title {
      width: 100%;
      padding: 0.06rem 0;
      display: flex;
      justify-content: space-around;
      text-align: center;
      border-bottom: 1px solid #1e6ebe;
      background-color: rgba(41, 171, 226, 0.2);
      .item {
        font-size: 0.18rem;
        // width: 25%;
      }
      > :nth-child(1) {
        width: 25%;
      }
      > :nth-child(2) {
        width: 25%;
      }
      > :nth-child(3) {
        width: 15%;
      }
      > :nth-child(4) {
        width: 35%;
      }
    }
    /* 滚屏 */
    .marquee_box {
      display: block;
      position: relative;
      width: 100%;
      flex: 1;
      // height: 100%;
      overflow: auto;
      // background-color: hotpink;
    }
    .marquee_list {
      width: 100%;
      display: block;

      .zc {
        color: rgb(79, 174, 54);
      }
      .yc {
        color: rgb(216, 227, 63);
      }
      cursor: pointer;
      .lione {
        border: 1px solid #1e6ebe;
        border-top: none;
      }
      .lione:first-of-type {
        border-top: 1px solid #1e6ebe;
      }
      .litwo {
        border: 1px solid #1e6ebe;
        border-top: none;
        background-color: rgba(41, 171, 226, 0.2);
      }
    }
    .marquee_list li {
      height: 0.3rem;
      line-height: 0.3rem;
      font-size: 0.16rem;
      width: 100%;
      display: flex;
      justify-content: space-around;
      // background-color: red;
    }
    .marquee_list li span {
      // padding: 0 0.02rem;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 20%;
      // background-color: palegreen;
    }
    .marquee_list li > :nth-child(1) {
      width: 25%;
      // background-color: chartreuse;
    }
    .marquee_list li > :nth-child(2) {
      width: 25%;
      // background-color: chartreuse;
    }
    .marquee_list li > :nth-child(3) {
      width: 15%;
      // background-color: pink;
    }
    .marquee_list li > :nth-child(4) {
      width: 35%;
      // background-color:gray;
    }
  }
  .iframe-container {
    width: 100%;
    height: 80vh;
  }
  .iframe {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1;
    opacity: 0.1;
    background: none;
    pointer-events: none;
  }
}
</style>

